<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>试题管理</title>
    <link href="../resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link href="../resources/css/exam.css" rel="stylesheet">
    <script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
    <script type="text/javascript" src="../resources/vue/date.js"></script>
    <script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/js/all.js"></script>
    <script type="text/javascript" src="../resources/js/tag-list.js"></script>
    <script type="text/javascript" src="../resources/js/add-tag.js"></script>
    <script type="text/javascript" src="../resources/js/add-tag.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js" charset="utf-8"></script>
    <script type="text/javascript" src="../resources/layui/layui.all.js" charset="utf-8"></script>
</head>
<style type="text/css">
    a {
        color: steelblue;
    }
</style>
<body>
<header>
    <div class="logo">
        <h1>在线考试系统</h1>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container" style="margin: 0  264px ;">
            <ul class="nav navbar-nav">
                <li class="nav-tabs">
                    <a href="main.html" style="font-size: 1.2em; width: 135px;"><i
                            class="glyphicon glyphicon-home"></i>&nbsp;首页</a>
                </li>
                <li>
                    <a href="/view/question/question-list" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list"></i>&nbsp;试题管理</a>
                </li>

                <li class="nav-tabs">
                    <a href="exampaper-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list-alt"></i>&nbsp;试卷管理</a>
                </li>
                <li>
                    <a href="exam-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-indent-right"></i>&nbsp;考试管理</a>
                </li>
                <li>
                    <a href="/toUser.do" style="font-size: 1.2em;width: 130px;"><i
                            class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a>
                </li>
                <li>
                    <a href="/toTag.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-random"></i>&nbsp;通用管理</a>
                </li>
                <li>
                    <a href="/toSystem.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-cog"></i>&nbsp;系统设置</a>
                </li>
            </ul>
            <a href="/userLogout" style="position: absolute;right: 100px; top: 10px;"><i class=""></i>[注销]</a>
        </div>

    </div>
</header>


<div id="exam-content-left" style="width: 150px; position: relative ;left: 220px;">
    <ul class="nav nav-pills nav-stacked" style="font-size: 1.1em; margin-top: 100px; text-align: right;">

        <li class="active">
            <a> <i class="glyphicon glyphicon-th-list"></i> 试卷管理 </a>
        </li>
        <li>
            <a href="exampaper-add2.html"> <i class="glyphicon glyphicon-log-out"></i> 自动组卷 </a>
        </li>
        <li>
            <a href="artificialExampaper-add2.html"> <i class="glyphicon glyphicon-log-out"></i>教师选题 </a>
        </li>

    </ul>
</div>

<div class="container">
    <div class="col-xs-10" id="right-content" style="padding-top: 0px;">
        <div id="app" class="container">
            <div class="table-responsive" style="width:1050px;">


                <div class="page-content">
                    <form class="form-inline " role="form">
                        查询条件：
                        <div class="form-group">
                            <label class="sr-only" for="field">请选择分类</label>
                            <select class="form-control" id="field" style="width: 143px;">
                                <option value="0">请选择分类</option>
                                <option v-for="(item,index) in fieldListresult" v-bind:value="item.fieldId">
                                    {{item.fieldName}}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="point">详细分类</label>
                            <select class="form-control" id="point" style="width: 135px">
                                <option value="0">请先选择分类</option>
                                <option v-for="(item,index) in pointListresult" v-bind:value="item.pointId">
                                    {{item.pointName}}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="examPaperName">试卷标题</label>
                            <input type="text" class="form-control" id="examPaperName" placeholder="输入试卷名称查询">
                            <input type="text" class="form-control" id="creator" placeholder="输入创建者名称查询">
                            <input type="text" class="form-control" placeholder="输入时间查询" id="createTime" readonly>
                        </div>
                        <button type="button" id="findExamPaper" class="btn btn-success">查询试卷</button>
                    </form>


                    <div id="question-list">
                        <table class="table-striped table">
                            <thead>
                            <tr>
                                <td><input type="checkbox" id="wanDeal">&nbsp;(全选)</td>
                                <td>序号</td>
                                <td>试卷名称</td>
                                <td>时长(分钟)</td>
                                <td>类别</td>
                                <td>创建人</td>
                                <td>创建时间</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in result">
                                <td><input type="checkbox" name="paperChoose" class="paperChoose"
                                           v-bind:value="item.id"></td>
                                <td>{{index+1}}</td>
                                <td><a v-bind:href="'../ExamPage/toShowExamPaper?examPaperId='+item.id"
                                       target="_blank">{{item.name}}</a>
                                </td>
                                <td>{{item.duration}}</td>
                                <td>{{item.paperType | StateFilter}}</td>
                                <td>{{item.creator}}</td>
                                <td>{{item.createTime | DateFilter}}</td>
                                <td>&nbsp;&nbsp;&nbsp;<a @click="delExamPaper" v-bind:value="item.id"><button type="button">删除</button></a>
                                    <div style="float: left"><form  action="/ExamPage/downloadExamPaper" method="post"><input type="text" name="examPaperId" v-bind:value="item.id" hidden><a><input type="submit" value="下载"></a></form></div>
                                    <!--<a @click="downloadExamPaper"  v-bind:value="item.id">下载</a>-->
                                </td>
                            </tr>
                            <tr>
                                <td colspan="7">
                                    <div id="pagenav"></div>
                                </td>
                                <td>
                                    <button type="button" id="delExamPapers" class="btn btn-danger"> 批量删除</button>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

<footer>
    <div class="container" style="width: 500px; margin: 0 auto;">
        <div class="row">
            <div class="col-md-12">
                <div class="copy">
                    <p>
                        ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                            href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);"
                                                                                   target="_blank">关于我们</a>
                        | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                            href="javascript:void(0);" target="_blank">联系我们</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Slider Ends -->


</body>
</html>
<script type="text/javascript">
    //日期和类型过滤
    Vue.filter("DateFilter", function (date) {
        var v = new Date(date);
        return formatDate(v, "yyyy-MM-dd HH:mm:ss");
    });

    Vue.filter("StateFilter", function (state) {
        if (state == 1) {
            return "自动组卷";
        } else if (state == 2) {
            return "教师选题";
        }
    });


    //vue使用
    var app = new Vue({
        el: "#app",
        data: {
            result: [],
            fieldListresult: [],
            pointListresult: []
        }
    })


    $(function () {
        getExamPaperList();
        getAllField();
        getPointByField();

        //查询按钮
        $("#findExamPaper").click(function () {
            getExamPaperList();
        })
        //父类下拉框
        $("#field").change(function () {
            getPointByField();
            getExamPaperList();
        })
        //子类下拉框
        $("#point").change(function () {
            getExamPaperList();
        })


        //全选多选框
        $("#wanDeal").click(function () {
            if ($(this).prop("checked")) {
                $('input:checkbox').prop("checked", 'checked');
                ;
            } else {
                $('input:checkbox').prop("checked", false);
            }

        })


        //批量删除
        $("#delExamPapers").click(function () {
            layer.confirm("(删除后将不可恢复)确认删除?", {btn: ["是", "否"]},
                function (index) {
                    var vals = [];
                    $("input[name='paperChoose']:checked").each(function (index, item) {
                        vals.push($(this).val());
                    });
                    var valstr = vals.join(",");
                    $.ajax({
                        type: 'post',
                        url: '/ExamPage/delExamPaper',
                        dataType: 'json',
                        data: {
                            examPaperIdsString: valstr,
                            examPaperId: 0
                        },
                        success: function (data) {
                            if (data.flag) {
                                layer.confirm("删除成功", {btn: "确定"},
                                    function () {
                                        layer.closeAll('dialog')
                                    }
                                )
                                layer.closeAll('index')
                                getExamPaperList();
                            } else {
                                layer.confirm("该试卷正在被使用,不允许删除", {btn: "确定"},
                                    function () {
                                        layer.closeAll('dialog')
                                    }
                                )
                            }
                        }
                    })
                }, function () {

                })
        })


        //时间选择
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //日期时间选择器
            laydate.render({
                elem: '#createTime'
                , type: 'datetime'
            });
        })


    })


    //单独删除
    function delExamPaper(e) {
        var v = e.target;
        layer.confirm("(删除后将不可恢复)确认删除?", {btn: ["是", "否"]},
            function () {
                $.ajax({
                    type: 'post',
                    url: '/ExamPage/delExamPaper',
                    dataType: 'json',
                    data: {
                        examPaperIdsString: '0',
                        examPaperId: $(v).attr("value")
                    },
                    success: function (data) {
                        if (data.flag) {
                            layer.confirm("删除成功", {btn: "确定"},
                                function () {
                                    layer.closeAll('dialog')
                                }
                            )
                            layer.closeAll('index')
                            getExamPaperList();
                        } else {
                            layer.confirm("该试卷正在被使用,不允许删除", {btn: "确定"},
                                function () {
                                    layer.closeAll('dialog')
                                }
                            )
                        }
                    }
                })
            }, function () {

            })
    }

    //下载
    function downloadExamPaper(e) {
        var v = e.target;
        $.ajax({
            type: 'post',
            url: '/ExamPage/downloadExamPaper',
            data: {
                examPaperId: $(v).attr("value")
            },
            success: function (data) {
                layer.msg("<a href=" + data + ">点击下载</a>")
            },
            error: function () {
             //   layer.msg("下载失败");
            }
        })
    }

    //查询用户数据
    var getExamPaperList = function (curr) {
        $.ajax({
            type: 'post',
            url: '/ExamPage/getExamPaperList',
            dataType: 'json',
            data: {
                pageSize: 10,
                pageNum: curr || 1,
                name: $("#examPaperName").val(),
                fieldId: $("#field").val(),
                pointId: $("#point").val(),
                creatorNeed: $("#creator").val(),
                createTimeNeed: $("#createTime").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav', //分页容器
                    pages: msg.totalPage,//总页数
                    skin: '#333333',
                    first: '首页',
                    last: '末页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getExamPaperList(obj.curr);
                        }
                    }
                });
            }, error: function () {
              //  alert("失败");
            }
        });
    };

    //查询分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/getAllField',
            dataType: 'json',
            success: function (msg) {
                app.fieldListresult = msg
            }, error: function () {
             //   alert("分类列表失败")
            }
        })
    }

    //根据父类获取小类列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            data: {
                fieldId: $("#field").val()
            },
            success: function (msg) {
                app.pointListresult = msg
            }, error: function () {
             //   alert("子类分类列表失败")
            }
        })
    }


</script>